<template>
    <div class="bg">
        <header>
            <div class="leftBoard">
                <span>VirtualChat  BETA  1.0</span>
            </div>
            <div class="middleBoard">

            </div>
            <div class="rightBoard">
                
            </div>
            
        </header>
        <aside></aside>
        <div class="ad"></div>
        <main>
            <Suspense>
                <RouterView/>
                <template #fallback>
                    <div class="loading">加载中...</div>
                </template>
            </Suspense>
        </main>
        <footer></footer>
    </div>
</template>

<script lang="ts" setup>



</script>

<style scoped>
.bg{
    background: rgb(0, 0, 0,0.8);
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 2fr 9fr 2fr;
    grid-template-rows: 40px 1fr 80px;
    grid-template-areas: 
    "header header header"
    "Lside container Rside"
    "footer footer footer"
    ;
    gap: 1px;
}

header{
    grid-area: header;
    max-height: 100%;
    display: flex;
    background-color: rgba(0, 0, 0, 0.8);
    color: rgb(255, 255, 255,0.8);
}

.rightBoard{
    flex: 1;
    height: 100%;
}

.middleBoard{
    flex: 5;
    height: 100%;
}

.leftBoard{
    flex: 1;
    height: 100%;
    display: flex;
    padding-left: 15px;
    justify-content: left;
    align-items: center;
    font-family: fantasy;
    font-weight: 300;
}

aside{
    grid-area: Lside;
    background-color: rgb(0, 0, 0);
}

.ad{
    grid-area: Rside;
    background-color: rgb(0, 0, 0);
}

main{
    grid-area: container;
    height: 100%;
    overflow: hidden;
}

footer{
    grid-area: footer;
    background-color: rgb(0, 0, 0,0.7);
}


</style>